/**
 * Classe d'interface
 */
function Inter(moteur) {
    this.moteur = moteur;
    
    this.vueCourante = null;
    this.place = 0;
    this.positions = [
        {top: -57, left: 400, rotation: 180},
        {top: 215, left: 834, rotation: -90},
        {top: 486, left: 400, rotation: 0},
        {top: 215, left: -33, rotation: 90},
        {top: 215, left: 460, zIndex: 501, rotation: 0},
        {top: 215, left: 340, zIndex: 1, rotation: 0}
    ];
    
    this.initEvents();
}

/**
 * Initialisation des évenements
 */
Inter.prototype.initEvents = function() {
    var inter = this;
    $('.labeled').focus(function() {
        var $this = $(this);
        if($this.hasClass('labeled')) {
            $(this).data('label', $this.val());
            $this.val('');
            $this.removeClass('labeled');
        }
    });
    $('.labeled').focusout(function() {
        var $this = $(this);
        if($this.val() == '' && typeof $this.data('label') != 'undefined') {
            $this.addClass('labeled');
            $this.val($this.data('label'));
        }
    });
    $('#login-form').submit(function() {
        inter.moteur.login($('#login-nom').val());
        return false;
    });
    $('#parties-creer').submit(function() {
        inter.moteur.creerPartie($('#parties-nom').val());
        return false;
    });
    $('#parties-liste').click(function(e) {
        var $target = ($(e.target).hasClass('parties-partie')) ? $(e.target) : $(e.target).parent();
        if($target.hasClass('parties-partie')) inter.moteur.chargerPartie($target.data('idpartie'));
    });
    $('#partie-commencerpartie').click(function() {
        inter.moteur.commencerPartie();
    });
    $('#partie-afficherregles').toggle(function() {
        $('#partie-regles').stop(true, true).fadeIn(300);
    }, function() {
        $('#partie-regles').stop(true, true).fadeOut(300);
    });
    $('.partie-nomjoueur').click(function() {
        var place = $(this).data('place');
        if(place == '2') {
            inter.moteur.direUno();
        }
        else {
            inter.moteur.direContreUno(inter.placeTableToPlace(place));
        }
    });
    $('#partie-quitterpartie').click(function() {
        inter.moteur.quitterPartie();
    });
    $('#partie-choixcouleurbleue').click(function() {
        inter.moteur.choixCouleur('B');
        inter.cacherChoixCouleur();
    });
    $('#partie-choixcouleurvert').click(function() {
        inter.moteur.choixCouleur('V');
        inter.cacherChoixCouleur();
    });
    $('#partie-choixcouleurrouge').click(function() {
        inter.moteur.choixCouleur('R');
        inter.cacherChoixCouleur();
    });
    $('#partie-choixcouleurjaune').click(function() {
        inter.moteur.choixCouleur('J');
        inter.cacherChoixCouleur();
    });
    $('#finpartie-retour').click(function() {
        inter.moteur.etat = "liste_parties";
    });
    $('#partie-formmessage').submit(function() {
        inter.moteur.envoyerMessage($('#partie-inputmessage').val());
        $('#partie-inputmessage').val('');
        return false;
    });
}

/**
 * Affiche le chargement
 */
Inter.prototype.afficherChargement = function() {
    $('#chargement').stop().fadeIn(300);
}

/**
 * Cacher le chargement
 */
Inter.prototype.cacherChargement = function() {
    $('#chargement:visible').stop().fadeOut(300);
}

/**
 * Cache les vues
 */
Inter.prototype.cacherVues = function(callback) {
    $('.view:visible').stop().fadeOut(300);
    this.vueCourante = null;
    window.setTimeout(function() {
        if(typeof callback != 'undefined') (callback)();
    }, 300);
}

/**
 * Afficher vue
 */
Inter.prototype.afficherVue = function(nomVue) {
    var callback = function() {
        switch(nomVue) {
            case 'login':
                document.getElementById('login-nom').focus();
                break;
        }
    };
    if(this.vueCourante == null) $('#view-'+nomVue).fadeIn(300, callback); 
    else if(nomVue != this.vueCourante) {
        this.cacherVues(function() {
            $('#view-'+nomVue).fadeIn(300, callback);
        });
    }
    this.vueCourante = nomVue;
}

/**
 * Affiche la demande de login
 */
Inter.prototype.afficherLogin = function() {
    this.afficherVue('login');
}

/**
 * Secoue le login
 */
Inter.prototype.afficherErreurLogin = function() {
    var i;
    var $viewLogin = $('#view-login');
    for(i=0;i<4;i++) {
        $viewLogin.animate({marginLeft: -176}, 30).animate({marginLeft: -156}, 60).animate({marginLeft: -166}, 30);
    }
}

/**
 * Affiche les parties
 */
Inter.prototype.afficherParties = function(parties) {
    this.afficherVue('parties');
    $('#parties-liste div').each(function() { // Supprime les parties qui ne sont pas dans la liste
        var $this = $(this);
        var thisIdPartie = $this.data('idpartie');
        var existe = false;
        for(var i in parties) {
            if(parties[i].idpartie == thisIdPartie) {
                existe = true;
                break;
            }
        }
        if(existe == false) $this.detach();
    });
    for(var i in parties) { // Ajoute ou update les autres
        var partie = parties[i];
        var s = (partie.joueurs>1) ? 's' : ''; // joueurs ou joueur ?
        if($('#parties-liste div#partie-'+partie.id_partie).length) { // si la partie est deja affichée
            $('#parties-liste div#partie-'+partie.id_partie+' span').html(partie.joueurs+' joueur'+s);
        }
        else { // sinon on la créé
            $('#parties-liste').append('<div class="parties-partie" id="partie-'+partie.id_partie+'" data-idpartie="'+partie.id_partie+'"><strong>'+partie.nom_partie+'</strong><span>'+partie.joueurs+' joueur'+s);
        }
    }
}

/**
 * Afficher une partie
 */
Inter.prototype.afficherPartie = function(place, joueurs) {
    this.place = place;
    this.cacherChargement();
    $('#partie-commencerpartie').hide();
    $('.partie-nomjoueur').html('');
    this.afficherVue('partie');
    for(var i in joueurs) {
        var joueur = joueurs[i];
        $('#partie-nomjoueur'+this.placeToPlaceTable(joueur.place)).html(joueur.nom_joueur);
    }
    if(place == 0) { // si c'est moi qui ai créé la partie
        $('#partie-commencerpartie').show();
    }
}

/**
 * Afficher un nouveau joueur
 */
Inter.prototype.afficherNouveauJoueur = function(nomJoueur, place) {
    $('#partie-nomjoueur'+this.placeToPlaceTable(place)).html(nomJoueur);
    this.afficherNotification(nomJoueur+' a rejoint la partie');
}

/**
 * Afficher un mouvement de carte
 */
Inter.prototype.afficherMouvementCarte = function(de, vers, idCarte) {
    var positions = this.positions;
    var positionJoueurDe = this.placeToPlaceTable(de);
    var positionJoueurVers = this.placeToPlaceTable(vers);
    
    var $carte = $('#carte-'+idCarte);
    var classes = {0: 'mainjoueur0', 1: 'mainjoueur1', 2: 'mainjoueur2', 3: 'mainjoueur3', 4: 'pioche', 5: 'talon'};
    if($carte.length>0) {
        $carte = this.enleverClassesCarte($carte);
    } else if(de < 4 && positionJoueurDe != 2) {
        var carteStyle = this.getCarteStyle($('.mainjoueur'+positionJoueurDe+':last').detach());
        $carte = this.creerCarte(idCarte);
        $carte.css(carteStyle);
    } else { // si la carte n'existe pas on la créé
        $carte = this.creerCarte(idCarte);
        $carte.css(positions[positionJoueurDe]);
    }
    $carte.addClass(classes[positionJoueurVers]);
    $('#view-partie').append($carte);
    this.bougerCartes(vers);
    this.bougerCartes(de);
}

/**
 *  Anime les cartes d'un jeu (main, talon...)
 */
Inter.prototype.bougerCartes = function(jeu) {
    var positions = this.positions;
    var positionJoueur = this.placeToPlaceTable(jeu);
    var $cartes = $('.mainjoueur'+positionJoueur);
    var nbCartes = $cartes.length;
    if(jeu == this.place) { // cartes du joueur
        $cartes.each(function(i) {
            var positionCarte = {top: positions[positionJoueur].top, left: positions[positionJoueur].left, rotation: positions[positionJoueur].rotation};
            positionCarte.left += i*30-(nbCartes-1)*15;
            positionCarte.zIndex = i;
            $(this).stop(true, true).animate(positionCarte, 300);
        });
    }
    else if(jeu < 4) { // autre joueur
        $cartes.each(function(i) {
            var positionCarte = {top: positions[positionJoueur].top, left: positions[positionJoueur].left, rotation: positions[positionJoueur].rotation};
            if(positionJoueur == 0) { // joueur du haut
                positionCarte.left -= i*30-(nbCartes-1)*15;
            } else if(positionJoueur == 1) { // joueur de droite
                positionCarte.top -= i*20-(nbCartes-1)*10;
            } else  { // joueur de gauche
                positionCarte.top += i*20-(nbCartes-1)*10;
            }
            positionCarte.zIndex = i;
            $(this).stop(true, true).animate(positionCarte, 300);
        });
    }
    else if(jeu == 4) { // talon
        $('.pioche').stop(true, true).animate(positions[4]);
    }
    else {
        this.positions[5].zIndex++;
        $('.talon:last-child').css('z-index', this.positions[5].zIndex).stop(true, true).animate(this.positions[5], 300, function() {
            $('.talon:first-child').detach();
        });
    }
}

/**
 * Afficher un tour
 */
Inter.prototype.afficherTourDe = function(de) {
    var positionJoueur = this.placeToPlaceTable(de);
    $(".partie-tourde").removeClass('partie-tourde');
    $('#partie-nomjoueur'+positionJoueur).addClass('partie-tourde');
    var inter = this;
    if(positionJoueur == 2) { // si c'est le tour du joueur
        $('.mainjoueur2').addClass('clickable').bind('click.tourJoueur', function() {
            inter.moteur.poserCarte($(this).data('idcarte'));
        });
        $('#partie-pioche').addClass('clickable').bind('click.tourJoueur', function() {
            inter.moteur.piocher();
        });
    }
    else {
        $('.mainjoueur2, #partie-pioche').removeClass('clickable').unbind('.tourJoueur');
    }
}

/**
 * Retourne le style d'une carte
 */
Inter.prototype.getCarteStyle = function($carte) {
    return {top: $carte.css('top'), left: $carte.css('left'), zIndex: $carte.css('z-index'), rotation: $carte.css('rotation')};
}

/**
 * Affiche le commencement de la partie
 */
Inter.prototype.afficherCommencementPartie = function() {
    if(this.place == 0) {
        $('#partie-commencerpartie').hide();
    }
    $('#partie-quitterpartie').hide();
    this.afficherNotification('La partie commence');
}

/**
 * Un joueur se déconnecte
 */
Inter.prototype.afficherSupprimerJoueur = function(place, nomJoueur) {
    this.afficherNotification(nomJoueur + " s'est déconnecté de la partie");
    $('#partie-nomjoueur'+this.placeToPlaceTable(place)).html('');
}

/**
 * Quelqu'un doit choisir une couleur
 */
Inter.prototype.afficherChoisirCouleur = function(qui) {
    if(qui == this.place) {
        this.afficherChoixCouleur();
    }
}

/**
 * Afficher le choix des couleurs
 */
Inter.prototype.afficherChoixCouleur = function() {
    $('#partie-choixcouleur').stop().animate({bottom: 10}, 300);
}

/**
 * Cacher le choix des couleurs
 */
Inter.prototype.cacherChoixCouleur = function() {
    $('#partie-choixcouleur').stop().animate({bottom: -100}, 300);
}

/**
 * Signaler un changement de couleur
 */
Inter.prototype.afficherChangementCouleur = function(couleur) {
    var couleurs = {R: '#c00', V: '#0c0', B: '#00569e', J:'#F8CA00'};
    $('.talon:last').find('.c').css('background-color', couleurs[couleur]).parent().find('.bg').detach();
}

/**
 * Affiche l'écran de fin de partie
 */
Inter.prototype.afficherPartieTerminee = function(nom) {
    this.afficherVue('finpartie');
    $('#finpartie-texte').html(nom + ' a gagné la partie !');
}

/**
 * Affiche une notification
 */
Inter.prototype.afficherNotification = function(texte) {
    var $notification = $('#notifications').prepend('<div>'+texte+'</div>').find('div:first-child');
    $notification.show(300, function() {
        window.setTimeout(function() {
            $notification.hide(300, function() {
                $notification.detach();
            });
        }, 3000);
    });
}

/**
 * Créé une carte
 */
Inter.prototype.creerCarte = function(idCarte) {
    var couleurs = {'B':'bleue','R':'rouge','J':'jaune','V':'vert'};
    var normales = {'S':'+2','P':'Ø','I':'↔'};
    var speciales = {'J':'','S':'+4'};
    switch(idCarte[0]) {
        case 'C':
            return $('<div class="carte cachee"><div class="c">UNO</div></div>');
            break;
        case 'S':
            return $('<div class="carte speciale" id="carte-'+idCarte+'" data-idcarte="'+idCarte+'"><span class="tl">'+speciales[idCarte[1]]+'</span><div class="bg"></div><div class="c">'+speciales[idCarte[1]]+'</div><span class="br">'+speciales[idCarte[1]]+'</span></div>');
            break;
        default:
            var n = (isNaN(idCarte[1])) ? normales[idCarte[1]] : idCarte[1];
            return $('<div class="carte '+couleurs[idCarte[0]]+'" id="carte-'+idCarte+'" data-idcarte="'+idCarte+'"><span class="tl">'+n+'</span><div class="c">'+n+'</div><span class="br">'+n+'</span></div>');
            break;
    }
}


/**
 * Afficher message
 */
Inter.prototype.afficherMessage = function(message, joueur) {
    var place = this.placeToPlaceTable((typeof joueur == 'undefined') ? this.place : joueur);
    $('#partie-message'+place+' span').html(message);
    $('#partie-message'+place).stop(true, true).fadeIn(300).delay(3000).fadeOut(300);
}

/**
 * Enlève les classes d'une carte
 */
Inter.prototype.enleverClassesCarte = function($carte) {
    return $carte.removeClass('mainjoueur0').removeClass('mainjoueur1').removeClass('mainjoueur2').removeClass('mainjoueur3').removeClass('talon').removeClass('pioche');
}

/**
 * Retourne la place du joueur sur la table
 */
Inter.prototype.placeToPlaceTable = function(i) {
    return (i<4) ? (i-this.place+6)%4 : i;
}

/**
 * Retourne la place du joueur dans la partie
 */
Inter.prototype.placeTableToPlace = function(i) {
    return (i<4) ? (i-this.place+2)%4 : i;
}